<script setup lang="ts">
import tinycolor2 from 'tinycolor2'
import { NodeDashedDynamicBorderPropsType } from './types'

defineOptions({
  name: 'SNodeDashedDynamicBorder'
})

withDefaults(defineProps<NodeDashedDynamicBorderPropsType>(), {
  color: '#333',
  bgOpacity: 0.3,
  borderWidth: 2,
  dashSize: 5,
  speed: 300,
  animate: false,
  hover: false
})
</script>

<template>
  <div class="s-node-dashed-dynamic-border-container flow-node-base">
    <s-dashed-dynamic-border
      class="s-node-dashed-dynamic-border"
      :color="color"
      :borderWidth="borderWidth"
      :dash-size="dashSize"
      :speed="speed"
      :animate="animate"
      :hover="hover"
    >
      <div
        class="s-node-dashed-dynamic-border__content flow-node-base-padding"
        :style="{ background: tinycolor2(color).setAlpha(bgOpacity).toRgbString() }"
      >
        <slot />
      </div>
    </s-dashed-dynamic-border>
  </div>
</template>

<style lang="scss">
@use './style' as *;
</style>
